<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="icon" href="data:;base64,=">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			.body {
				background-color: rgba(153, 204, 255, 0.85);
			}

			.h1 {
				color: rgba(102, 102, 102, 0.9);
			}

			.h2 {
				color: rgba(102, 102, 102, 0.9);
			}

			.b1 {
				width: 200px;
				height: 100px;
				font-size: 30px;
				border-style: groove;
				border-radius: 8px;
				color: rgba(255, 255, 102, 0.9);
				background-color: rgba(153, 204, 51, 0.9);
			}

			.b2 {
				width: 200px;
				height: 80px;
				font-size: 30px;
				border-radius: 8px;
				border-style: groove;
				color: rgba(255, 255, 102, 0.9);
				background-color: rgba(153, 204, 51, 0.9);
			}
		</style>
		<title>网页控制继电器</title>
	</head>
	<body class="body">
		<center>
			<div>
				<h1 class="h1">ESP8266</h1>
				<h1 class="h2">网页控制继电器</h1>
				<br /><br />
				<button id="switch" class="b1" onclick="switch_relay()">打开继电器</button>
				<br /><br /><br /><br /><br /><br /><br />
				<button id="reset" class="b2" onclick="reset_divice()">重启设备</button>
				<script>
					function switch_relay() {
						var obj = document.getElementById('switch');
						if (obj.textContent == "打开继电器") {
							obj.innerHTML = "关闭继电器";
							http_post("www.esp8266.com", "ON");
						} else {
							obj.innerHTML = "打开继电器";
							http_post("www.esp8266.com", "OFF");
						}
						return 0;
					}

					function reset_divice() {
						var obj = document.getElementById('reset');
						//http_post("www.esp8266.com", "RESET");
						obj.innerHTML = "重启中...";
						setTimeout("alert('设备正在重启...请稍后...')", 500);
						return 0;
					}
				</script>

			</div>
		</center>
		<script>
			function http_post(url, info) {
				var xml = new XMLHttpRequest();
				xml.open("POST", url, true);
				xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xml.onreadystatechange = function() {
					if (xml.readyState == 4 && xml.status == 200) {
						var back = xml.responseText;
						console.log("\n\n[respond]\n\n" + back);
						return 0;
					}
				}
				xml.send("a=" + info);
				console.log("[POST] " + String(info));
			}
		</script>
	</body>
</html>
